<template>
    <div style="width: 100%;height: 100%;background-color: #fff;padding:20px">
        <a-card :loading="loading">
        <a-form
        ref="formRef"
        :model="formData"
        :rules="rules"
        style="width: 60%;"
        :auto-label-width="true"
      >
        <a-form-item label="秘匙" field="qrcode">
          <a-input v-model="formData.qrcode" disabled placeholder="不能扫码，请输入该值进行绑定" />
        </a-form-item>
        <a-form-item label="快速扫码绑定" field="url">
          <img :src="formData.url" style="height: 200px;width: 200px;"/>
        </a-form-item>
        <a-form-item label="验证码" field="code">
          <a-input v-model="formData.code" placeholder="请输入谷歌身份验证器上的数字验证码" />
        </a-form-item>

        <a-form-item label="操作密码" field="use_pay_password">
          <a-input-password
            v-model="formData.use_pay_password"
            placeholder="请输入操作密码"
          />
        </a-form-item>
        <a-form-item label="" >
          <a-button type="primary" mode="round" @click="submit" :loading="submitLoading">提交驗证</a-button>
        </a-form-item>
      </a-form>
    </a-card>
    </div>
</template>
<script setup>
import { ref, reactive, computed, watch,onMounted } from "vue";
import { Message } from "@arco-design/web-vue";
import commonApi from "@/api/common";
import { throttle } from "lodash";
import { useRouter,useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
const formRef = ref(null)
const submitLoading=ref(false)
const loading=ref(false)
const formData = reactive({
    qrcode:'',
    code: "",
    url:'',
    use_pay_password:'',
});

// 验证规则
const rules = ref({
  code: [{ required: true, message: "请输入" }],
  use_pay_password: [{ required: true, message: "请输入" }],
});


// 数据保存
const submit = throttle(async () => {
    const validate = await formRef.value?.validate();
    const redirect = route.query.redirect ? route.query.redirect : '/'
    if (!validate) {
        submitLoading.value=true
    try {
      let data = { ...formData };
        console.log('data', data);
        delete data.url
        delete data.qrcode
      let result = await commonApi.bind_google_secret(data);
      if (result.code === 200) {
        Message.success("操作成功");
        router.push(redirect)
      }
    } finally {
        submitLoading.value=true
    }
  }
}, 100);
const getCode = async() => { 
    const { data } = await commonApi.get_google_secret()
    formData.qrcode = data.secret
    formData.url=data.url
}
onMounted(async() => { 
    loading.value=true
    await getCode()
    loading.value=false
})
</script>
<style scoped lang="less">
</style>